<template>
  <q-layout view="lHh Lpr lFf">
    <q-drawer elevated v-model="drawer" :width="240" content-class="column">
      <q-toolbar class="bg-primary text-white text-h5">
        <q-icon name="mdi-rhombus-split-outline" size="md" class="q-mr-md" />cc-admin
      </q-toolbar>
      <div class="col">
        <q-list class="q-mt-xs">
          <menu-cmp :menuList="menuList" :level="1" :navList.sync="navList" />
        </q-list>
      </div>
    </q-drawer>
    <q-header>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="drawer = !drawer" />
        <q-toolbar-title class="text-body2">欢迎使用！</q-toolbar-title>
        <div>
          <q-btn size="sm" flat icon="mdi-card-search-outline" color="white" />
          <q-btn size="sm" flat icon="mdi-help-circle-outline" color="white" />
          <q-btn size="sm" flat icon="mdi-bell-outline" color="white" />
          <q-btn icon="mdi-card-account-details-star" flat label="欢迎您，超级管理员">
            <q-menu fit>
              <q-list>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name="mdi-briefcase-account" />
                  </q-item-section>
                  <q-item-section>个人中心</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name="mdi-account-box-outline" />
                  </q-item-section>
                  <q-item-section>账户设置</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name="mdi-cog-transfer-outline" />
                  </q-item-section>
                  <q-item-section>系统设置</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name="mdi-form-textbox-password" />
                  </q-item-section>
                  <q-item-section>修改密码</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name="mdi-sitemap" />
                  </q-item-section>
                  <q-item-section>切换部门</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name="mdi-cached" />
                  </q-item-section>
                  <q-item-section>清理缓存</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn dense flat icon="mdi-logout-variant" color="white" label="退出登录" />
        </div>
      </q-toolbar>
      <nav-tab :navList.sync="navList" @changeTab="changeTab" />
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import MenuCmp from 'components/menu.vue';
import NavTab from 'components/nav.vue';
import routes from 'src/router/routes';

export default {
  name: 'MainLayout',
  components: { MenuCmp, NavTab },
  data() {
    return {
      drawer: true,
      menuList: [],
      navList: [],
      menu: null,
    };
  },
  mounted() {
    this.menuList = routes;
    const home = routes[0];
    if (this.$route.path === '/') {
      this.$router.replace(home);
    } else if (home.path === this.$route.path) {
      this.navList.push(home);
    } else {
      this.navList.push(home);
      this.navList.push(this.$route);
    }
  },
  methods: {
    getMenuByPath(menuList, path) {
      menuList.forEach((menu) => {
        if (menu.path === path) {
          this.menu = menu;
        }
        if (menu.children && menu.children.length > 0) {
          this.getMenuByPath(menu.children, path);
        }
      });
    },
    changeTab(tab) {
      this.getMenuByPath(this.menuList, tab);
      if (this.$route.path !== this.menu.path) { this.$router.replace(this.menu); }
    },
  },
};
</script>
